<!-- LanguageSelector 语言选择器, 需要使用 iconfont 技术 -->
<template>
    <el-dropdown trigger="click" @command="handleCommand">
        <!-- 使用 the iconfont -->
        <i class="iconfont icon-zhongyingwen"></i>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item
                    v-for="item in localeStore.languageMaps"
                    :key="item.lang"
                    :command="item.lang"
                    :disabled="localeStore.languageKey === item.lang"
                >
                    <!-- 通过动态组件展示图标 - 需要全局注册 element plus icon -->
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts" name="LanguageSelector">
import { hookI18n } from "@/hooks"
import { useLocaleStore } from "@/stores"

const { setLocale } = hookI18n()
const localeStore = useLocaleStore()

const handleCommand = (command: LanguageKey) => {
    localeStore.languageKey = command
    setLocale(command)
    // window.location.reload();
}
</script>

<style scoped lang="css"></style>
